<template>
  <div class="header flex j-s-b a-c">
    <div class="flex">
      <div class="logo">logo</div>
      <div>门诊医生工作站</div>
    </div>
    <div class="flex j-s-b a-c">
      <div class="time">{{ new Date() }}</div>
      <el-divider direction="vertical" />
      <div class="tips">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tishi"></use>
        </svg>
      </div>
      <el-divider direction="vertical" />
      <div class="user">
        <div class="flex jsb a-c">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-0-29"></use>
          </svg>
          <div>李医生</div>
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="setting">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shezhi"></use>
        </svg>
      </div>
    </div>
  </div>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#fff"
    text-color="#222325"
    active-text-color="rgb(28, 174, 232)"
    @select="handleSelect"
  >
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">门诊排班</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>


<style lang="scss" scoped>
.header {
  padding: 0 16px;
  color: #fff;
  height: 42px;
  background: var(--theme-color);
}

.logo {
  margin-right: 60px;
}

.el-menu-demo {
  height: 42px;
}

.icon {
  font-size: 22px;
}

.tips .icon {
  font-size: 18px;
}

.setting .icon {
  font-size: 20px;
  color: #fff;
}
</style>